<template>
    <main role="main">
        <div class="album py-5 bg-light">
            <div class="container">

                <div class="row course-head">
                    <div class="col-sm-6" id="cover-video-div">
                        <img class="img-fluid" v-bind:src="course.image" alt="图片加载失败">
                    </div>
                    <div class="col-sm-6">
                        <h3>{{course.name}}</h3>
                        <h4 class="album-red">{{course.price}}.00元</h4>
                        <p class="album-float">{{course.summary}}</p>
                        <div class="album-overflow-hidden text-muted">
                            <div class="float-l">
                                <star-icon v-bind:quantity="course.level"></star-icon>
                                <span class="album-empty-1"></span>
                                <span class="album-green">{{COURSE_LEVEL | optionKV(course.level)}}</span>
                                <span class="album-empty"></span>
                            </div>
                            <div class="float-l">
                                <figure-icon v-bind:quantity="course.enroll"></figure-icon>
                                <span class="album-green">{{course.enroll}}</span>
                            </div>
                        </div>

                        <div class="margin-top album-block">
                            <p class="album-block course-head-button-links">
                                <a href="javascript:void(0);"
                                   v-if="!memberCourse || !memberCourse.id"
                                   v-on:click="enroll()"
                                   class="album-block album-background-red album-delete-border btn btn-lg btn-primary btn-shadow">
                                    Apply for course
                                </a>
                                <a href="javascript:void(0);"
                                   v-if="memberCourse.id"
                                   class="album-block album-background-red album-delete-border btn btn-lg btn-primary btn-shadow">
                                    You have applied
                                </a>
                                <span class="album-block album-empty"></span>
                                <a class="album-block btn btn-lg btn-primary btn-shadow" href="javascript:void(0);">Add cart</a>
                            </p>
                        </div>
                    </div>
                </div>

                <div class="row">

                    <!-- 课程内容 & 大章小节 -->
                    <div class="col-md-9">
                        <!-- Nav tabs -->
                        <ul class="nav nav-tabs">
                            <li class="nav-item">
                                <a class="nav-link active" href="#info" data-toggle="tab">Synopsis</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#chapter" data-toggle="tab">Chapter</a>
                            </li>
                        </ul>

                        <br>

                        <!-- 大章，小节 -->
                        <div class="tab-content">
                            <div class="tab-pane active" id="info" v-html="courseContentDto.content">
                            </div>
                            <div class="tab-pane" id="chapter">

                                <div v-for="(chapter, i) in chapterDtoList" class="chapter">
                                    <div v-on:click="doFolded(chapter, i)" class="chapter-chapter">
                                        <span>{{chapter.name}}</span>
                                        <span class="pull-right float-r">
                                            <svg v-show="chapter.folded" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-caret-left" viewBox="0 0 16 16">
                                                <path d="M10 12.796V3.204L4.519 8 10 12.796zm-.659.753l-5.48-4.796a1 1 0 0 1 0-1.506l5.48-4.796A1 1 0 0 1 11 3.204v9.592a1 1 0 0 1-1.659.753z"/>
                                            </svg>
                                            <svg v-show="!chapter.folded" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-caret-down" viewBox="0 0 16 16">
                                                <path d="M3.204 5h9.592L8 10.481 3.204 5zm-.753.659l4.796 5.48a1 1 0 0 0 1.506 0l4.796-5.48c.566-.647.106-1.659-.753-1.659H3.204a1 1 0 0 0-.753 1.659z"/>
                                            </svg>
                                        </span>
                                    </div>
                                    <div v-show="!chapter.folded">
                                        <table class="table table-striped">
                                            <tr v-for="(s, j) in chapter.sections" class="chapter-section-tr">
                                                <td class="col-sm-8 col-xs-12">
                                                    <div v-on:click="authPlay(s,chapter.sections)" class="section-title">
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-camera-video-fill" viewBox="0 0 16 16">
                                                            <path fill-rule="evenodd" d="M0 5a2 2 0 0 1 2-2h7.5a2 2 0 0 1 1.983 1.738l3.11-1.382A1 1 0 0 1 16 4.269v7.462a1 1 0 0 1-1.406.913l-3.111-1.382A2 2 0 0 1 9.5 13H2a2 2 0 0 1-2-2V5z"/>
                                                        </svg>
                                                        <span class="album-empty">
                                                        </span>
                                                        <span class="d-none d-sm-inline">第{{j+1}}节</span>
                                                        {{s.title}}
                                                        <span v-show="s.charge !== SECTION_CHARGE.CHARGE.key" class="badge badge-primary hidden-xs">免费</span>
                                                    </div>
                                                </td>
                                                <td class="col-sm-1 text-right">
                                                    <span class="badge badge-primary">{{s.time | formatSecond}}</span>
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>

                    <!-- 讲师信息 -->
                    <div class="margin-top-90 col mb-4">
                        <div class="card">
                            <img v-bind:src="teacherDto.image" class="card-img-top" alt="teacher.image">
                            <div class="card-body">
                                <h5 class="card-title">{{teacherDto.name}}</h5>
                                <p class="card-text">{{teacherDto.motto}}</p>
                                <p class="card-text">{{teacherDto.intro}}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <auth-player v-bind:player-id="'authPlay-div'"
                     v-bind:auth-div="'authJ_prismPlayer'"
                     v-bind:url="'album/player'"
                     ref="authPlayer">
        </auth-player>

    </main>
</template>

<script>
    import StarIcon from '../components/starIcon'
    import FigureIcon from '../components/figureIcon'
    import AuthPlayer from "../components/auth-player";
    export default {
        name: 'detail',
        components: {AuthPlayer, StarIcon, FigureIcon},
        data: function () {
            return {
                courseId: "",
                course: {},
                teacherDto: {},
                courseContentDto: {},
                memberCourse: {},
                chapterDtoList: [],
                sectionDtoList: [],
                //枚举
                COURSE_LEVEL: COURSE_LEVEL,
                SECTION_CHARGE: SECTION_CHARGE,
            };
        },
        mounted() {
            let _this = this;
            // 路径传参的话，用query获取参数信息，但参数会明文在访问路径中暴露。
            // console.log("id = ",_this.$route.query.id);
            // 参数设置到$route.params的内部，获取参数，需要用这种方式，注意是$route，不是$router
            // console.log("id = ",_this.$route.params.id);
            if (!_this.$route.params.id) {
                _this.courseId = _this.$route.query.id;
            } else {
                _this.courseId = _this.$route.params.id;
            }
            _this.getCourseDetail();
        },
        methods: {


            /**
             * 获取报名
             */
            getEnroll() {
                let _this = this;
                let loginMember = Tool.getLoginUser();
                if (Tool.isEmpty(loginMember)) {
                    return;
                }
                let memberCourseList = SessionStorage.get(loginMember.id);
                for (let i = 0; i < memberCourseList.length; i++) {
                    let booleCourse = memberCourseList[i].courseId == _this.course.id;
                    let booleMember = memberCourseList[i].memberId == loginMember.id;
                    if (booleCourse == true && booleMember == true) {
                        _this.memberCourse = memberCourseList[i];
                        return ;
                    }
                }

            },

            /**
             * 报名
             */
            enroll: function () {
                let _this = this;
                let loginMember = Tool.getLoginUser();
                if (Tool.isEmpty(loginMember)) {
                    Toast.warning("请先登录");
                    return;
                }
                _this.$ajax.post(process.env.VUE_APP_SERVER + '/business/album/memberCourse/enroll', {
                    memberId: loginMember.id,
                    courseId: _this.course.id
                }).then((response) => {
                    let resp = response.data;
                    if (resp.success) {
                        _this.memberCourse = resp.content;
                        Toast.success("报名成功！");
                        _this.setCourseEnrollCache(loginMember);
                    } else {
                        Toast.warning(resp.message);
                    }
                });
            },

            setCourseEnrollCache: function (loginMember) {
                let _this = this;
                SessionStorage.remove(loginMember.id);
                _this.$ajax.post(process.env.VUE_APP_SERVER + '/business/album/memberCourse/get-enroll', {
                    memberId: loginMember.id,
                }).then((response)=>{
                    let resp = response.data;
                    if (resp.success) {
                        SessionStorage.set(loginMember.id, resp.content);
                    }
                });
            },

            /**
             * 点击获取授权并播放视频
             * @param section
             */
            authPlay:function (section,sectionList) {
                let _this = this;
                if (section.charge == _this.SECTION_CHARGE.CHARGE.key) {
                    let loginUser = Tool.getLoginUser();
                    if (Tool.isEmpty(loginUser)) {
                        // Toast.warning("请先登录！");
                        // 事件总线触发端，实现当用户没登录时，触发打开登录窗口事件。
                        // $emit方法的第一个参数是事件名称(自定义)，通过自定义事件名称关联执行端并由执行端完成事件内容。
                        // 第二个是要传递的参数，可以是json对象或字符串。
                        _this.$event.$emit("openLoginModal", "111");
                    } else {
                        if (Tool.isEmpty(_this.memberCourse)) {
                            Toast.warning("需要先报名课程！");
                        } else {
                            _this.$refs.authPlayer.clickAuthPlay(section);
                        }
                    }
                }else if (section.charge == _this.SECTION_CHARGE.FREE.key) {
                    _this.$refs.authPlayer.clickAuthPlay(section);
                }

                // 解决:将auth-player组件html放在bind:v-for的标签下，父组件无法识别子组件的问题
                // 后因将auth-player组件移出bind:v-for的标签，
                // 继续使用$nextTick内的代码播放器无法正常工作，所以将这段代码注释掉。
                // _this.$nextTick(() => {
                //     //console.log('我是父组件')
                //     sectionList.forEach((s, j) => {
                //         _this.$refs.authPlayer.clickAuthPlay(section);
                //     })
                // })
            },

            /**
             * 展开/收缩一个章节
             * @param chapter
             */
            doFolded (chapter, i) {
                let _this = this;
                chapter.folded = !chapter.folded;
                // 在v-for里写v-show，只修改属性不起作用，需要$set
                _this.$set(_this.chapterDtoList, i, chapter);
            },

            getCourseDetail() {
                let _this = this;
                // post向后端传递字符串参数(非对象)
                _this.$ajax.post(process.env.VUE_APP_SERVER + '/business/album/course/course/detail', 'courseId='+_this.courseId).then((response)=>{
                    let resp = response.data;
                    if (resp.success == false) {
                        Toast.warning("没有这门课程！")
                    }
                    _this.course = resp.content;
                    // 由于有些课程并没有完善详细信息，可能会没有老师或没大章或没小节，作空值处理
                    _this.teacherDto = _this.course.teacherDto || {};
                    _this.chapterDtoList = _this.course.chapterDtoList || [];
                    _this.sectionDtoList = _this.course.sectionDtoList || [];
                    _this.courseContentDto = _this.course.courseContentDto || {};

                    // 将所有的节放入对应的章中
                    for (let i = 0; i < _this.chapterDtoList.length; i++) {
                        let c = _this.chapterDtoList[i];
                        c.sections = [];
                        for (let j = 0; j < _this.sectionDtoList.length; j++) {
                            let s = _this.sectionDtoList[j];
                            if (c.id === s.chapterId) {
                                c.sections.push(s);
                            }
                        }
                        Tool.sortAsc(c.sections,"sort")
                    }

                    // 获取报名信息
                    _this.getEnroll();
                })
            },

        }
    }
</script>

<style scoped>
    .float-l{
        float: left;
    }

    .margin-bottom{
        margin-bottom: 0.5rem;
    }

    .margin-top{
        margin-top: 0.5rem;
    }
    .margin-top-90{
        margin-top: 2.5rem;
    }

    .float-r{
        float: right;
    }

    .album-overflow-hidden{
        overflow: hidden;
    }

    .album-empty{
        padding: 0.4rem;
    }

    .album-background-red{
        background-color: #DD5A43;
    }

    .album-delete-border{
        border:  0px #ffffff;
    }

    .album-red{
        color: #c03e4b;
    }

    .album-block{
        display: block;
        float: left;
    }

    .album-green{
        color: #00BE67;
    }

    .album-blue{
        color: #0088CC;
    }

    /* 章节列表 */
    .chapter {
        padding-bottom: 1.25rem;
    }
    .chapter-chapter {
        font-size: 1.25rem;
        padding: 1.25rem;
        background-color: #23527c;
        color: white;
        cursor: pointer;
    }
    .chapter-section-tr {
        font-size: 1rem;
    }
    .chapter-section-tr td{
        padding: 1rem 1.25rem;
        vertical-align: middle;
    }
    /*鼠标手势*/
    .chapter-section-tr td .section-title{
        color: #555;
    }

    .chapter-section-tr td .section-title .album-blue:hover{
        color: red;
    }

    .chapter-section-tr td .section-title:hover{
        color: red;
        font-weight: bolder;
        cursor: pointer;
    }
    /*行头小图标*/
    .chapter-section-tr td .section-title i{
        color: #2a6496;
    }
    @media (max-width: 700px) {
        .chapter-chapter {
            font-size: 1.2rem;
        }
        .chapter-section-tr {
            font-size: 0.9rem;
        }
    }

</style>
